<template>
  <main id="myStyle" class=" col col-xl-7 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12 " >
    <div class="box shadow-sm border rounded bg-white mb-1 osahan-share-post">
      <ul class="nav nav-justified border-bottom osahan-line-tab" id="myTab" role="tablist" >
        <li class="nav-item" @click="sendText">
          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home"
            role="tab" aria-controls="home" aria-selected="true"
          ><i class="el-icon-edit"></i>发表动态
          </a>
        </li>
        <li class="nav-item" @click="sendHope">
          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile"
            role="tab" aria-controls="profile" aria-selected="false"
          ><i class="el-icon-camera"></i> 许愿</a
          >
        </li>
        <li class="nav-item" @click="sendBottle">
          <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact"
            role="tab" aria-controls="contact" aria-selected="false"
          ><i class="el-icon-ship"></i> 漂流瓶
          </a>
        </li>
      </ul>
      <div class="tab-content" id="myTabContent" >
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" >
          <div class="p-3 d-flex align-items-center w-100" href="#" >
            <!-- 用户在线头像 -->
            <div class="dropdown-list-image mr-3">
              <img
                v-if="JSON.stringify($store.state.userInfo) !== '{}'"
                class="rounded-circle"
                :src="$store.state.userInfo.userHeader"
                alt=""
              />
              <img
                v-else
                class="rounded-circle"
                src="@/assets/img/minilog.png"
                alt=""
              />
              <div class="status-indicator bg-success"></div>
            </div>
            <!-- 输入文本框 -->
            <div class="w-100" >
              <textarea
                ref="content"
                οnpaste="return false"
                v-model="moodtext"
                placeholder="开始写日记，记录自己每日所思..."
                class="form-control border-0 p-0 shadow-none"
                rows="1"
              ></textarea>
              <textarea
                disabled
                ref="tiwen"
                v-if="MessageType=='6'||MessageType=='7'"
                v-model="tiwenHuatcontent"
                class="form-control border-0 p-0 shadow-none tiwenhuati "
                rows="1"
              ></textarea>
            </div>
          </div>

          <div style="margin: 15px" v-show="file_list.length!=0" >
            <!-- 图片上传 -->
            <el-upload
              ref="upload"
              :class="file_list.length >= 9 ? 'a' : 'b'"
              :file-list="file_list"
              :auto-upload="false"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              accept=".png,.jpeg,.jpg"
              action=""
              list-type="picture-card"
              :on-change="getFile"
              :limit="9"
              :on-exceed="overstep"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- //图片显示框 -->
            <el-dialog :visible.sync="dialogVisible" top="10vh" width="40%">
              <div>
                <img :src="diaIMG" alt="" width="100%" />
              </div>
            </el-dialog>

          </div>
        </div>
        <!-- //图片 -->
        <div
          class="tab-pane fade"
          id="profile"
          role="tabpanel"
          aria-labelledby="profile-tab"
        >
          <div class="p-3 w-100">
            <textarea
              v-model="moodtext"
              placeholder="分享每一天，向往的远方终会来..."
              class="form-control border-0 p-0 shadow-none"
              rows="3"
            ></textarea>
          </div>

        </div>
        <!-- 漂流瓶 -->
        <div
          class="tab-pane fade"
          id="contact"
          role="tabpanel"
          aria-labelledby="contact-tab"
        >
          <div class="p-3 w-100">
            <textarea
              v-model="moodtext"
              placeholder="生活的烦恼，丢一个漂流瓶吧..."
              class="form-control border-0 p-0 shadow-none"
              rows="3"
            ></textarea>
            <div></div>
          </div>
        </div>
      </div>
      <!-- 下面按钮 -->
      <div class="border-top p-3 d-flex align-items-center">
        <div class="mr-auto">
          <a
            style="color:#007BFF"
            class="text-link small Mypopover"
            @click="localcationButton"
          >
            <i class="el-icon-location-outline"></i>
            <span v-if="locationName==''">添加地点</span>
            <span v-if="locationName!==''">{{locationName}}</span>
            <span v-if="locationName!==''" class="text-link small Mypopover " >
              <i class="el-icon-circle-close" style="color:#007BFF" @click.stop="clearLocation"></i>
            </span>
          </a>
          <!-- 地点选择框 -->
          <div class="mypop" v-if="localtionValue == true">
            <localSearch
              ref="qqmap"
              @on-select="addressSelectHandler"
              :type="'2'"
            ></localSearch>
          </div>
          <i v-show="localtionValue == true" class="el-icon-arrow-up mysanjiao" ></i>
          <!-- 地点选择框结束 -->
        </div>
        <div class="flex-shrink-1 bottomIcon">
          <span v-show="this.MessageType!=='2'&&this.MessageType!=='3'">
            <i @click= "clickImgicon" class="iconfont icon-tupian" ></i>
            <i class="iconfont icon-toupiao-m" @click="vote=true"></i>
            <!-- 投票输入框 -->
            <el-dialog
              :lock-scroll="false"
              title="请填写投票相关内容"
              :visible.sync="vote"
              :close-on-click-modal="false"
              width="80%"
              custom-class="dialogStyle"
            >
              <div style="margin-bottom:15px">
                <el-input size="mini" placeholder="请输入要投票的内容" v-model="voteContent"></el-input>
              </div>
              <div style="display: flex;">
                <el-input size="mini" placeholder="请输入要投票的选项内容" v-model="inText"></el-input>
                <el-button type="primary" size="mini" @click="addVoteItem">添加</el-button>
              </div>
              <div v-if="voteList.length!=0" >
                <div v-for="(item,index) in voteList" :key="index" class="voteItem">
                  <div>选项{{index+1}}&nbsp;&nbsp;{{item}}</div>
                  <div><i class="el-icon-circle-close" style="font-size:16px;color:rgb(96, 98, 102)" @click="delItem(index)"></i></div>
                </div>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="vote = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="isVote" size="mini">确定发表</el-button>
              </span>
            </el-dialog>
            <i class="iconfont icon-tiwen " @click="tiwen"></i>
            <i class="iconfont icon-huati" @click="huati"></i>
          </span>
          <button type="button" class="btn btn-primary btn-sm" @click="submitMood">发 送</button>
        </div>
      </div>
    </div>
    <!-- <div class="box shadow-sm border rounded bg-white mb-1 osahan-share-post py-2 mynavBar" v-if="$store.state.indexSelect==='all'">
      <span>全部</span> <span>最新</span>  <span>最热</span> <span>官方</span> <span>精华</span>
    </div> -->
    <div v-loading="!MoodStore.o" element-loading-text="拼命加载中" class="mainList" v-infinite-scroll="MoodLoading" >
      <div v-for="(item, index) in MoodList" :key="index">
        <Moodinfo @likeNumChange="likeNumChange($event, item)" :Iteminfo="item" :index="index" v-if="true"
          @click="del" > </Moodinfo>
      </div>
      <div v-if="MoodList.length<10">
        <el-empty image="https://iconfont.alicdn.com/t/019a2b48-cc19-4ff2-b722-b8b671aa5b57.png" description="暂无更多动态"></el-empty>
      </div>
    </div>

  </main>

</template>

<script>
import Moodinfo from "./main_moodList.vue";
import localSearch from "../common/localcationSerch.vue";
import Bus from '@/components/common/eventBus.js';

export default {
  components: {
    Moodinfo, localSearch,
  },
  data() {
    return {
      locationName: '',
      moodtext: "",
      location: "",
      userImg: [],
      showLoading: false,
      file_list: [],
      diaIMG: "",
      dialogVisible: false,
      vote: false,
      moodSub: this.newStore(), // 发表文章
      MoodList: [],
      MoodStore: this.newStore(), // 获取文章
      localtionValue: false,
      inText: '',
      voteContent: '',
      voteList: [],
      MessageType: '1',
      tiwenHuatcontent: "",
      moodNum: 0,
      moodDisabled: true,
    };
  },
  created() {
    this.getMoodFun();
  },
  mounted() {
    Bus.$off("changeMoodType");
    Bus.$on('changeMoodType', (type) => {
      this.getMoodFun(type);
    });
  },
  methods: {
    localcationButton() {
      this.localtionValue = !this.localtionValue;
    },
    addressSelectHandler(row) {
      this.locationName = row.title;
      this.localtionValue = false;
    },
    httpRequest() {

    },
    addVoteItem() {
      if (this.inText !== '' && this.voteList.length >= 5) {
        this.$message.warning('投票选项最多5个');
      } else if (this.inText === '') {
        this.$message.warning('选项不能为空');
      } else {
        this.voteList.push(this.inText);
        this.inText = '';
      }
    },
    isVote() {
      if (this.voteContent === '') {
        this.$message.warning('投票内容不能为空');
      } else if (this.voteList.length < 2) {
        this.$message.warning('选项至少为两项');
      } else {
        this.MessageType = '5';
        const obj = {};
        obj.content = this.voteContent;
        obj.option = {};
        this.voteList.forEach((el) => {
          obj.option[el] = 0;
        });
        this.spost(this.moodSub, "/Mood/release", {
          userId: this.$store.state.userInfo.userid,
          userEssay: JSON.stringify(obj),
          userLocation: this.locationName === '' ? '' : this.locationName,
          userImg: this.userImg,
          MessageType: this.MessageType,
        }).then(() => {
          this.userImg = [];
          this.moodtext = "";
          this.file_list = [];
          this.locationName = '';
          this.voteList = [];
          this.voteContent = '';
          this.inText = '';
          this.$message.success("发表成功啦！记得开心哦！");
        });
        this.vote = false;
      }
    },
    // 发送按钮
    submitMood() {
      let content = '';
      if (this.moodtext !== '') {
        if (this.file_list.length !== 0 && this.MessageType !== '2' && this.MessageType !== '3' && this.MessageType !== '6' && this.MessageType !== '7') {
          this.MessageType = '1';
        }
        if (this.MessageType === '6' || this.MessageType === '7') {
          content = `${this.tiwenHuatcontent}&BakerMood&${this.moodtext}`;
        } else {
          content = this.moodtext;
        }
        this.spost(this.moodSub, "/Mood/release", {
          userId: this.$store.state.userInfo.userid,
          userEssay: content,
          userLocation: this.locationName === '' ? '' : this.locationName,
          userImg: this.userImg,
          MessageType: this.MessageType,
        }).then(() => {
          this.userImg = [];
          this.moodtext = "";
          this.file_list = [];
          this.locationName = '';
          this.MessageType = '';
          this.tiwenHuatcontent = '';
          this.$message.success("发表成功啦！记得开心哦！");
        });
      } else {
        this.$message.warning("发表内容不为空哦！");
      }
    },
    // 图片按钮
    clickImgicon() {
      this.$refs.upload.$children[1].$refs.input.click();
    },
    tiwen() {
      this.MessageType = '6';
      this.$nextTick(() => {
        this.$refs.tiwen.setAttribute('disabled', true);
        this.tiwenHuatcontent = '#提问';
        this.$refs.content.focus();
      });
    },
    huati() {
      this.MessageType = '7';
      this.$nextTick(() => {
        this.tiwenHuatcontent = '#';
        this.$refs.tiwen.removeAttribute('disabled');
        this.$refs.content.focus();
      });
    },
    //
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = () => {
          imgResult = reader.result;
        };
        reader.onerror = (error) => {
          reject(error);
        };
        reader.onloadend = () => {
          resolve(imgResult);
        };
      });
    },
    // /
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
      this.getBase64(file.raw).then((res) => {
        this.diaIMG = res;
      });
    },
    // 删除按钮
    handleRemove(file, fileList) {
      this.file_list = fileList;
    },
    // 超出函数
    overstep() {
      this.$message.error("图片最多上传九张哦");
    },
    // 上传前函数
    beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (
        file.type !== "image/jpeg"
        && file.type !== "image/png"
        && file.type !== "image/jpg"
      ) {
        this.$message.error("上传图片只能是JPG、PNG、jpeg格式!");
        return false;
      }
      if (file.size <= isLt5M) {
        this.$message.error("上传图片大小不能超过 5MB!");
        return false;
      }

      return true;
    },
    // 上传后函数
    getFile(file, fileList) {
      this.file_list = fileList;
      this.userImg = [];
      if (this.file_list.length !== 0) {
        fileList.forEach((item) => {
          this.getBase64(item.raw).then((res) => {
            this.userImg.push(res);
          });
        });
      } else {
        this.userImg = [];
      }
    },
    sendBottle() {
      this.MessageType = '3';
      this.localtionValue = false;
    },
    sendText() {
      this.MessageType = '1';
      this.localtionValue = false;
    },
    sendHope() {
      this.MessageType = '2';
      this.localtionValue = false;
    },
    clearLocation() {
      this.locationName = '';
    },
    delItem(index) {
      this.voteList.splice(index, 1);
    },
    // 删除心情
    del(index) {
      this.moodList.splice(index, 1);
    },
    // 获取心情说说列表
    MoodLoading() {
      console.log(123);
    },
    getMoodFun(type) {
      if (type === undefined) {
        this.$store.commit('setindexSelect', 'all');
      } else {
        this.$store.commit('setindexSelect', 'other');
      }
      this.spost(this.MoodStore, "/Mood/getMoodList", {
        type, user_id: this.$store.state.userInfo.userid, moodNum: this.moodNum, Moodlength: 5,
      })
        .then((res) => {
          this.MoodList = res.d.MoodList;
        });
    },
    // 子组件传值给父组件
    likeNumChange(num, item) {
      item.likeNum = num;
    },
  },
};
</script>

<style scoped lang="scss">
/deep/.el-upload--picture-card {
  line-height: 90px;
  height: 80px;
  width: 80px;
}
:deep(.el-upload-list__item-actions, ) {
  line-height: 80px;
  height: 80px;
  width: 80px;
}
/deep/ .el-upload-list__item {
  height: 80px;
  width: 80px;
}
/deep/ .el-upload-list__item-thumbnail {
  line-height: 80px;
  height: 80px;
  width: 80px;
}
.a {
  /deep/ .el-upload--picture-card {
    display: none;
  }
}
/deep/ .nav-link {
  padding: 8px !important;
}
.mynavBar {
  span {
    padding: 5px 10px;
  }
  span:hover {
    background: rgb(255, 242, 229);
    cursor: pointer;
    border-radius: 15px;
    font-weight: 700;
    color: coral;
  }
}
.Mypopover {
  position: relative;
  background: white;
}
 .voteItem{
   margin-left: 1%;
   width: 98%;
   margin-top: 10px;
   display:flex; justify-content:space-between;
   background: #ebedf0;
   border-radius: 5px;
   div{
     margin-left: 10px;
   }
  }
.mypop {
  border: 1px solid #e8e8ee;
  padding: 2%;
  margin-top: 15px;
  background: white;
  position: absolute;
  width: 450px;
  height: auto;
  z-index: 3000;
  border-radius: 5px;
}
.mysanjiao {
  position: absolute;
  font-size: 30px;
  z-index: 3001;
  color: #dcdfe6;
  margin-top: 13px;
  left: 50px;
  box-shadow: 0px -10px 0px 0px white inset;
}
.bottomIcon{
  display: flex;
  span{
    height:auto;
    margin-right: 15px;
  i{
    color: #007BFF;
    font-size: 1.5rem;
    margin-left: 5px;
  }
  i:hover{
    color: coral;
    background-color: #FFF2E5;
    border-radius: 15%;
  }
  }

}
@media screen and (max-width: 375px) {
  .mypop {
    width: 310px;
  }
}
.tiwenhuati{
  margin-top: 20px;
  font-style :oblique;
  color:#007bff;
}
.form-control:disabled, .form-control[readonly]{
  background: none;
}
.mainList{
  overflow:auto
}
.mainList::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>
